<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <h2>{{ nowTime }}</h2>
        <van-button type="default" @click="getDefault()">GET请求</van-button>
        <van-button type="primary" @click="getPost()">POST请求</van-button>
        <van-button type="info" @click="getPut()">PUT请求</van-button>
        <van-button type="warning" @click="getDelete()">Delete请求</van-button>
        <van-button type="danger" @click="getPost()">危险按钮</van-button>
        <van-button color="#7232dd">单色按钮</van-button>
        <van-button color="#7232dd" plain>单色按钮</van-button>
        <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
    </div>
</template>

<script>
import api from '../service/index';
import { Toast } from "vant";
export default {
    name: 'HelloWorld',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            nowTime: new Date(),
        }
    },
    mounted() {
      let _this = this;// 声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(() => {
          // _this.nowTime = new Date();// 修改数据date
          _this.nowTime = _this.timeFormate(new Date());
      }, 1000);
    },
    beforeDestroy() {
      if (this.timer) {
          clearInterval(this.timer);// 在Vue实例销毁前，清除我们的定时器
      }
    },
    methods: {
        timeFormate(timeStamp) {
            let year = new Date(timeStamp).getFullYear();
            let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1;
            let date =new Date(timeStamp).getDate() < 10? "0" + new Date(timeStamp).getDate(): new Date(timeStamp).getDate();
            let hh =new Date(timeStamp).getHours() < 10? "0" + new Date(timeStamp).getHours(): new Date(timeStamp).getHours();
            let mm =new Date(timeStamp).getMinutes() < 10? "0" + new Date(timeStamp).getMinutes(): new Date(timeStamp).getMinutes();
            let ss =new Date(timeStamp).getSeconds() < 10? "0" + new Date(timeStamp).getSeconds(): new Date(timeStamp).getSeconds();
            return `当前时间:${ year }年${ month }月${ date }日${hh}:${mm}:${ss}`
        },
        getDefault() {
            api.fetchGet('/get').then((data) => {
                // this.base.token = data.data.token　　　　
                // console.log("this.base.tokenthis.base.token",this.base.token)
                // this.indexPost2(this.rres)
                console.log(data.data);
                Toast('GET success!!!!');
            }).catch(err => {
                console.log(err);
            })
        },
        getPost() {
            api.fetchPost('/post').then((data) => {
                // this.base.token = data.data.token　　　　
                // console.log("this.base.tokenthis.base.token",this.base.token)
                // this.indexPost2(this.rres)
                console.log(data.data);
                Toast('POST success!!!!');
            }).catch(err => {
                console.log(err);
            })
        },
        getPut() {
            api.fetchPut('/put').then((data) => {
                console.log(data.data);
                Toast('PUT success!!!!');
            }).catch(err => {
                console.log(err);
            })
        }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
    font-weight: normal;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: inline-block;
    margin: 0 10px;
}

a {
    color: #42b983;
}
</style>
